<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    {include file='base/common_header'}
    <style>
        .layui-table td, .layui-table th { min-width: auto; }
    </style>
</head>

<body>

<br/>
<br/>
<br/>
<div class="layui-form layuimini-form">


    <form class="question-form layui-form layui-col-space10">
        <input type="hidden" name="topic_id" value="{$topic_id}">
        <input type="hidden" name="id" value="{$id}">
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">
                <span class="x-red">*</span>题目</label>
            <div class="layui-input-inline">
                <input type="text" id="question" value="{$data.question}" name="question" required="" lay-verify="required" autocomplete="off" class="question-q layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">
                权重</label>
            <div class="layui-input-inline">
                <input type="number" id="sort" value="{$data.question_sort}" name="question_sort"  required=""  autocomplete="off" class="sort-q layui-input">
                <div style="color: red;">权重数字越小越排前,请填写1-1000之间的序号，出错自己负责哦</div>
            </div>
        </div>
        <div id="optiondiv">
            {if !empty($data.question_options)}
            {volist name='$data.question_options.content' id='topic' key='k'}
            <div class="layui-form-item">
                <label class="layui-form-label">选项：</label>
                <div class="layui-input-block">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="content[]" placeholder="" value="{$topic}" class=" q-content layui-input">
                        </div>
                        <label class="layui-form-label">分数</label>
                        <div class="layui-input-inline">
                            <input type="number" name="score[]" placeholder="" value="{$data.question_options.score[$k-1]}" class="q-score layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete" onclick="deletediv(this);">删除</a>
                    </div>
                </div>
            </div>
            {/volist}
            {/if}
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="data-add-option-btn">
                    <i class="layui-icon">&#xe608;</i> 添加一个选项
                </button>
                <p style="color: red;padding-top: 10px">序号从小到大排序，请填写1-1000之间的序号，出错自己负责哦</p>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="add" lay-submit="">确认保存</button>
            </div>
        </div>
    </form>

</div>

</body>
<script>
    /*添加选项*/
    layui.use(['form','layer'], function () {
        var $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;

        //监听提交
        form.on('submit(add)',
            function(data) {
                var _question = $('.q-content')
                var _sort = $('.sort-q').val()

                if(_sort == ''){layer.msg('请填写题目的排序',{icon:5});return false;}
                if(isNaN(_sort)){layer.msg('题目排序只能是数字',{icon:5});return false;}

                if(_question.length == 0){layer.msg('请添加选项',{icon:5});return false;}

                $.post("/admin/topic/saveQuestion",$('.question-form').serialize(),function (res) {
                    if(res.error_code != 0){
                        layer.msg(res.msg,{icon:5});
                    }else{
                        //发异步，把数据提交给php
                        layer.msg("操作成功", {
                                icon: 6
                            },
                            function() {
                                window.parent.location.reload();
                                // 获得frame索引
                                var index = parent.layer.getFrameIndex(window.name);
                                //关闭当前frame
                                parent.layer.close(index);
                            });
                    }
                },'json')
                return false;
            });


        $("#data-add-option-btn").on("click", function () {
            $("#optiondiv").append(
                '<div class="layui-form-item">'+
                '<label class="layui-form-label">选项：</label>'+
                '<div class="layui-input-block">'+
                '<div class="layui-inline">'+
                '<div class="layui-input-inline">'+
                '<input type="text" name="content[]" placeholder="" value="" class="q-content layui-input">'+
                '</div>'+
                '<label class="layui-form-label">分数</label>'+
                '<div class="layui-input-inline">'+
                '<input type="number" name="score[]" placeholder="" value="" class="q-score layui-input">'+
                '</div>'+
                '</div>'+
                '<div class="layui-inline">'+
                '<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete" onclick="deletediv(this);">删除</a>'+
                '</div>'+
                '</div>'+
                '</div>'
            );
        });
    });

    function deletediv(a) {
        $(a).parent().parent().parent().remove();
    }
</script>
</html>